<#include "../common/layoutWithOutDocType.ftl"/>
<@layoutWithOutDocType>
<h1>派单</h1>
<table width="100%">
<tr>
<td width="50%" style="margin-top:0px;padding-top:0px" valign="top">
<div class="well" style="height:800px">
<!--百度地图容器-->
  	<div id="container"></div>
<style type="text/css"> 
#container{height:100%}
</style> 
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VVxB3u2hT9wlF2QfiHqu7zNx"></script>
<script type="text/javascript" src="/js/MarkerTool.js"></script>
<link type="text/css" rel="stylesheet" href="/css/showBo.css" />
<script type="text/javascript" src="/js/showBo.js"></script>

<script>
	var drivers = [];
	
	//创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        initAllMarker();//初始化数据库中已有的标点
        markerUser();
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("container");//在百度地图容器中创建一个地图
		var point = new BMap.Point(${order.startpoint_longitude?string(",##0.000000")},${order.startpoint_latitude?string(",##0.000000")});//定义一个中心点坐标 <成都>
        map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
	    //向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
	    //向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
	    //向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
    }
    
    
     //初始化数据库中已有的标点
    function initAllMarker(){
   		<#list driverList as driver>
	    	var point = new BMap.Point(${driver.longitude?string(",##0.000000")},${driver.latitude?string(",##0.000000")});
			//创建一个标点
			var marker = new BMap.Marker(point);
			//标点右下角显示的LABEL
			var dataLabel = new BMap.Label('${driver.name!""}', {offset: new BMap.Size(30, 5)});
			//var dataLabel = new BMap.Label('', {offset: new BMap.Size(13, 23)});
		    dataLabel.setStyle({border: "0px",backgroundColor:""});
			var dataIcon= new BMap.Icon(
			<#if driver.status == 0>
			 '/img/marker/marker_greennew.png',
			<#elseif driver.status == 1>
			'/img/marker/marker_bluenew.png',
			<#elseif driver.status == 2>
			 '/img/marker/marker_rednew.png',
			<#elseif driver.status == 3>
			'/img/marker/marker_purplenew.png',
			<#elseif driver.status == 4>
			'/img/marker/marker_yellowback.png', 
			<#else>
			'/img/marker/marker_yellowback.png', 
			</#if>
			new BMap.Size(80, 35), {
    			imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  			}
			);
		    //设置标点图标
			marker.setIcon(dataIcon);			    
			//设置标点LABEL
			marker.setLabel(dataLabel);
			//设置ID
			marker.id = "${driver.id}";
			drivers.push({id:'${driver.id}', name:'${driver.name!""}'});
			marker.addEventListener("mouseover", function(){
			    var content = "<table><tr><td width='45%'>";
				content += "<img width='70' src='/upload/${driver.head!"default_avatar.gif"}'>";
			    content += "</td>";
				content += "<td>工号：${driver.job_number!""}<br>";
				content += "姓名：${driver.name!""}<br>";
				content += "公司：${driver.companyname!""}<br>";
				<#if driver.license_num == session.company>
					content += "电话：${driver.phone!""}<br>";
				</#if>
				content += "已接订单数：${driver.acceptNum!"0"}<br>";
			    /*content += "姓名：${driver.name!""}<br>";
		    	content += "电话：${driver.phone!""}<br>";
		    	content += "驾照：${driver.driver_license!""}<br>";
		    	var sex = ${driver.sex} ;
		    	if(sex == 0 ){
			    	content += "性别：男<br>";
		    	}
		    	else if(sex == 1){
		    		content += "性别：女<br>";
		    	}
		    	else{
		    		content += "性别：未知<br>";
		    	}*/
		    	//content += "年龄：${driver.age!""}</td></tr>";
		    	content += "</td></tr>";
		    	content += "<tr><td colspan=2><input type='button' value='选择' onclick='chooseDriver(\"${driver.id}\",\"${driver.name!""}\",\"${driver.acceptNum}\")'></td></tr>";
		    	content += "</table>";
				var infoWindow = new BMap.InfoWindow(content);
				this.openInfoWindow(infoWindow);
			});
			
			//在地图上打点
			map.addOverlay(marker);
		//	marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		</#list>
    }
    
    function markerUser(){
    	var icon_path = '/img/marker/core_user.png';
    	var point = new BMap.Point(${order.startpoint_longitude?string(",##0.000000")},${order.startpoint_latitude?string(",##0.000000")});
		//创建一个标点
		var marker = new BMap.Marker(point);
		//标点右下角显示的LABEL
		var dataLabel = new BMap.Label("下单用户", {offset: new BMap.Size(13, 23)});
	    dataLabel.setStyle({border: "solid 1px green",backgroundColor:"white"});
		var dataIcon= new BMap.Icon(
			icon_path, 
			new BMap.Size(45, 45), {
				imageOffset: new BMap.Size(0, 0)
  			}
		);
	    //设置标点图标
		marker.setIcon(dataIcon);			    
		//设置标点LABEL
		marker.setLabel(dataLabel);
		//在地图上打点
		map.addOverlay(marker);
    }
    
    //选择代驾员
    function chooseDriver(id ,name, acceptNum){
       var trId = "driver_" + id ;
        if(document.getElementById(trId)){
             alert('"' + name + '"已选择');
             return;
        }
    	var html = '<tr id="' +trId + '"><td>' + name + '<font color="red">(已接单数：'+acceptNum+')</font><input id="driver_id" name="driver_id" type="hidden" value="' + id + '"></td><td><a class="btn btn-success" href="#" onclick="remove(\'' + id + '\')"><i class="icon-trash icon-white"></i> 取 消</a></td></tr>';
    	$("#driverTable").append(html);
    }
    
    function remove(id){
    	var trId = "#driver_" + id;
    	$(trId).remove();
    }
    initMap();
    
     function dis(){
	 	  var myDis = new BMapLib.DistanceTool(map);
	 	  myDis.open();
	 }
	 
	 function selectAll() {
	 	var bounds = map.getBounds();
	 	var os = map.getOverlays();
	 	if(os && os.length > 0) {
	 		for(var i = 0; i < os.length; i++) {
	 			if(bounds.containsPoint(os[i].getPosition())) {
	 				var id = os[i].id;
	 				for(var k = 0; k < drivers.length; k++) {
	 					if(drivers[k].id == id) {
	 						chooseDriver(id, drivers[k].name, drivers[k].acceptNum);
	 						break;
	 					}
	 				} 
	 			}
	 		}
	 	}
	 }
	 
	 function selectByJobNumber() {
	 	var jobNumber = document.getElementById("jobNumber").value;
	 	if(!jobNumber) {
	 		alert("请输入代驾员工号!");
	 		return false;
	 	}
	 	var driverMap = [];
	 	<#list driverList as driver>
	 		driverMap.push({jobNumber:"${driver.job_number!""}", id:"${driver.id}", name:"${driver.name}", acceptNum:"${driver.acceptNum}"});
	 	</#list>
	 	var i = 0
	 	for(; i < driverMap.length; i++) {
	 		if(driverMap[i].jobNumber.toLowerCase() == jobNumber.toLowerCase()) {
	 			chooseDriver(driverMap[i].id, driverMap[i].name, driverMap[i].acceptNum);
	 			break;
	 		}
	 	}
	 	if(i >= driverMap.length) alert("当前页面地图上无此代驾驶员！");
	 }
</script>
</div>
</td>
<td>
<!--button type="button" class="btn btn-primary" onclick="dis();" >测 距</button-->
<div class="well" width="35%">
<span class="label label-success">订单信息</span>
<table class="table table-bordered table-striped">
		<tr>
			<td>
			订单号
			</td>
			<td>
			${order.id}
			</td>
		</tr>
		<tr>
			<td>
			起点
			</td>
			<td>
			${order.startpoint!""}
			</td>
		</tr>
		<tr>
			<td>
			终点
			</td>
			<td>
			${order.endpoint!""}
			</td>
		</tr>
	</table>
	
<span class="label label-success">已选择</span>
<form id="form1" class="form-inline" method="post" action="/order/saveJob">
	<input type="hidden" name="order_id" value="${order.id}">
	<table class="table table-bordered table-striped" id="driverTable">
		<#list tempList as tempDriver>
			 <tr id="driver_${tempDriver.id}">
			 	<td>
			 		${tempDriver.name} <input id="driver_id" name="driver_id" type="hidden" value="${tempDriver.id}">
			 	</td>
			 	<td>
			 		<a class="btn btn-success" href="#" onclick="remove(${tempDriver.id})"><i class="icon-trash icon-white"></i> 取 消</a>
			 	</td>
			 </tr>
		</#list>
	</table>
	<p>代驾员工号：<input type="text" id="jobNumber" style="height:30px;" onkeypress="if(event.keyCode==13) {selectByJobNumber();return false;}"/>
	   <input type="button" class="btn btn-primary" onclick="selectByJobNumber()" value="选择"/>
	   <input type="button" class="btn btn-primary" onclick="assigment()" value="派 单"/>
	</p>
	<a class="btn btn-primary" onclick="selectAll();"><i class="icon-trash icon-white"></i> 全 选</a> &nbsp;&nbsp;
	<button type="button" class="btn btn-primary" onclick="javascript:history.back();">返回</button>
	<button type="button" class="btn btn-primary" onclick="javascript:assigment2();">选择派单</button>
</form>
<table class="table table-bordered table-striped">
	<tr>
		<td style="width:10%;">选择</td>
		<td style="width:5%;">工号</td>
		<td style="width:15%;">姓名</td>
		<td style="width:15%;">距离(公里)</td>
		<td style="width:10%;">积分</td>
		<td style="width:10%;">军衔</td>
		<td style="width:10%;">已完成订单数</td>
		<td style="width:13%;">已取消订单数</td>
		<td style="width:12%;">已接订单数</td>
		<td style="width:5%;">派单</td>
	</tr>
	<#list driverShowList as driver>
		<tr>
		<td style="vertical-align: middle;text-align:center;height:35px;"><input type="checkbox" name="assigmentbox" value="${driver.id}" /></td>
			<td style="vertical-align: middle;text-align:center;height:35px;">${driver.job_number!""}</td>
			<td style="vertical-align: middle;text-align:center;height:35px;">${driver.name!""}</td>
			<td style="vertical-align: middle;text-align:center;height:35px;">${driver.distance!"0"}</td>
			<td style="vertical-align: middle;text-align:center;height:35px;">${driver.point!"0"}</td>
			<td style="vertical-align: middle;text-align:center;height:35px;">${driver.level!""}</td>
			<td style="vertical-align: middle;text-align:center;height:35px;">${driver.finishNum!"0"}</td>
			<td style="vertical-align: middle;text-align:center;height:35px;">${driver.cancelNum!"0"}</td>
			<td style="vertical-align: middle;text-align:center;height:35px;">${driver.acceptNum!"0"}</td>
			<td style="vertical-align: middle;text-align:center;height:35px;"><button type="button" class="btn btn-primary" onclick="assigment1(${driver.id})" <#if driver.acceptNum gt 0 >style="background-color:#FF5511;"</#if>>派单</button></td>
		</tr>
	</#list>
</table>
</div>
</td>
</tr>
</table>

<script>
	function assigment(){
		if($("#driver_id").val()){
			$("#form1").submit();
		}
		else{
			alert("请先选择代驾员");
		}
	}
	function assigment1(driverId){
		window.location.href="/order/saveJob?driver_id="+driverId+"&order_id=${order.id}";
	}
	
//	$("input[name=allassigmentbox]").click(function(){
//		if($("input[name=allassigmentbox]:checked").length>0){
//			//全选
//			$("input[name=assigmentbox]").attr('checked',true)
//		}else{
//			$("input[name=assigmentbox]").removeAttr('checked')
//		}
//	});
	
	function assigment2(){
		var checkObj = $("input[name=assigmentbox]:checked");
		if(checkObj.length<=0){
			Showbo.Msg.alert('请选择需要派送的员工');
		}else{
			var driver_ids = new Array($(checkObj).length);
			for(var i =0;i<$(checkObj).length;i++){
				driver_ids[i]=$($(checkObj)[i]).val();
			}
			window.location.href="/order/saveJob?driver_id="+driver_ids+"&order_id=${order.id}";
		}
	}
	
</script>
          
</@layoutWithOutDocType>